<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>全国新房</title>
		<link rel="stylesheet" href="../css/main.css" />
		<link rel="stylesheet" href="../css/iconfont.css" />
		<script src="../js/jquery.min.js"></script>
		<script src="../js/utils.js"></script>
		<script src="../js/vue.min.js"></script>
		<script src="../js/pinyin.js" ></script>
		<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
	</head>

	<body>
		<div id="page_header" class="page-header"></div>
		<div id="page_menu" class="content-area menu items-display-flex flex-row flex-between"></div>
		<div id="city_sets"></div>
		<div id="maincontent">
			<div class="search2-part">
				<div class="content-area">
					<div class="content items-display-flex flex-row">
						<div class="inputtxt">
							<input placeholder="请输入区域，楼盘名称开始找房" v-model="namekey" id="searchtxt"/>
						</div>
						<div class="search-btn" v-on:click="doSearch" >
							<img src="../img/index/search-white.png" />搜&nbsp;索
						</div>
					</div>
					<div class="nav">
						口袋买房<span class="lab iconfont icon-jiantou_xiangyouliangci"></span><span>{{region_name}}</span>
					</div>
				</div>
			</div>
			<div class="conditions-part">
				<div class="content-area">
					<div class="condition items-display-flex flex-row">
						<div class="lab">区域：</div>
						<div class="items items-display-flex flex-row">
							<div class="item" v-on:click="chooseArea(index)" v-for="(area,index) in areas" v-bind:class="{'orange-color':(index==areaindex)}">{{area.name}}</div>
						</div>
					</div>
					<div class="condition items-display-flex flex-row">
						<div class="lab">单价：</div>
						<div class="items items-display-flex flex-row">
							<div class="item" v-on:click="choosePrice(index)" v-for="(price,index) in prices" v-bind:class="{'orange-color':(index==priceindex)}">
								{{price.name}}
							</div>
							<div>
								<!--<input />&nbsp;-&nbsp;<input />&nbsp;万-->
							</div>
						</div>
					</div>
					<!--<div class="condition items-display-flex flex-row">
						<div class="lab">面积：</div>
						<div class="items items-display-flex flex-row">
							<div class="item" v-for="(size,index) in sizes" v-bind:class="{'orange-color':(index==sizeindex)}">
								<div v-html="size.name"></div>
							</div>
							<div>
								<input />&nbsp;-&nbsp;<input />&nbsp;m<sup>2</sup>
							</div>
						</div>
					</div>-->
					<div class="condition items-display-flex flex-row">
						<div class="lab">房型：</div>
						<div class="items items-display-flex flex-row">
							<div class="item" v-on:click="chooseHouseType(index)" v-for="(housetype,index) in housetypes" v-bind:class="{'orange-color':(index==htypeindex)}">
								{{housetype.name}}
							</div>
						</div>
					</div>
					<div class="condition items-display-flex flex-row">
						<div class="lab">类型：</div>
						<div class="items items-display-flex flex-row">
							<div class="item" v-on:click="chooseHouseCategory(index)" v-for="(housestyle,index) in housestyles" v-bind:class="{'orange-color':(index==hsindex)}">
								{{housestyle.name}}
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="house-part">
				<div class="content-area">
					<div class="house" v-for="item in houses">
						<div class="horizon"></div>
						<div class="topoffset items-display-flex flex-row flex-between">
							<div class="items-display-flex flex-row">
								<div class="image" v-on:click="gotoDetail(item.id)">
									<img v-bind:src="item.img_path" />
								</div>
								<div class="intro">
									<div class="lab1" v-on:click="gotoDetail(item.id)">{{item.house_name}}</div>
									<div class="lab2">
										<span class="location iconfont icon-weizhi"></span>
										<span>[{{item.region_name}}]</span>
										<span class="offset">地址：{{item.address}}</span>
									</div>
									<div class="lab2">
										<span>户型：{{item.room2 ? (item.room1 + '-' + item.room2):item.room1}}室</span> <span class="line">|</span> 面积：
										<span v-if="item.house_area">{{item.house_area}}m<sup>2</sup></span>
										<span v-else> 30m<sup>2</sup>&nbsp;起</span>
									</div>
									<div class="lab2" >
										<span v-if="item.house_unit_price>0">单价：<span>{{item.house_unit_price}}元/m<sup>2</sup></span></span>
										<span v-else>单价：待定</span>
										<span class="line">|</span> 
										
										<span v-if="item.total_price>0">总价：<span class="price">{{item.total_price}}</span><span class="price-note">万起</span></span>
										<span v-else >总价：<span class="price">待定</span></span>
									</div>
									<div class="lab3">
										<span v-for="flag in item.flag">{{flag}}</span>
									</div>
								</div>
							</div>
							<div class="logo-part">
								<img class="logo" src="../img/logo.png" />
								<div class="lab1">口袋返现</div>
								<div class="lab2" v-if="item.return_money == '待定'">{{item.return_money}}</div>
								<div class="lab2" v-else>{{item.return_money}}万/套</div>
							</div>
						</div>
					</div>
					<div class="horizon"></div>
					<div class="nav-page items-display-flex flex-row" v-if="total_page > 0">
						<div v-for='(items,index) in page_nav' class="items-display-flex flex-row">
							<div class="nav items-display-flex flex-row" v-for="item in items">
								<div v-on:click="pageleft" v-if="item == 'left'" class="flag unactive-nav-page iconfont icon-nvxingfuben"></div>
								<div v-on:click="pageright" v-else-if="item == 'right'" class="flag unactive-nav-page iconfont icon-nvxingfuben1"></div>
								<div v-on:click="pageto(item)" v-else v-bind:class="[item==cur_pageindex ? 'active-nav-page':'unactive-nav-page']">{{item}}</div>
							</div>
							<div v-if="index < page_nav.length-1">...</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div id="page_footer" class="page-footer"></div>
	</body>
	<script>
		$(document).ready(function() {
			loadHeaderAndFooter();
		});
		
//		var publicUrl = 'http://pocket.all-star.top';
//		var publicUrl = 'http://www.kdcode.com';
		var maincnt = new Vue({
			el: '#maincontent',
			data: {
				areas: [],
				areaindex: -1,
				prices: [],
				priceindex: -1,
				sizes: [],
				sizeindex: -1,
				housetypes: [],
				htypeindex: -1,
				housestyles: [],
				hsindex: -1,
				houses: [],
				page_nav:[],
				cur_pageindex:1,
				pagesize:5,
				namekey:'',
				region_name:'',
				region:0,
				region_type:0,
				total_page:0,
				next_page:0
			},
			methods:{
				gotoDetail:function(houseid){
					console.log(houseid)
					var urlstr = 'xfdetail.html?hid=' + houseid;
					window.open(urlstr);
				},
				doSearch:function(){
					searchName = this.namekey;
					loadHouseList();
				},
				chooseArea:function(index){
					this.areaindex = index;
					this.region = this.areas[this.areaindex].id;
					if(index == 0){
						this.region_type = 0;
					}
					else{
						this.region_type = 1;
					}
					this.cur_pageindex = 1;
					searchName = '';
					loadHouseList();
				},
				choosePrice:function(index){
					this.priceindex = index;
					this.cur_pageindex = 1;
					searchName = '';
					loadHouseList();
				},
				chooseHouseType: function(index){
					this.htypeindex = index;	
					this.cur_pageindex = 1;
					searchName = '';
					loadHouseList();
				},
				chooseHouseCategory:function(index){
					this.hsindex = index;
					this.cur_pageindex = 1;
					searchName = '';
					loadHouseList();
				},
				pageto:function(pageindex){
					this.cur_pageindex = pageindex;
					loadHouseList();
				},
				pageleft:function(){
					var pgindex = this.cur_pageindex - 1;
					if(pgindex < 1){
						pgindex = 1;
					}
					this.cur_pageindex = pgindex;
					loadHouseList();
				},
				pageright:function(){
					var pgindex = this.cur_pageindex + 1;
					if(pgindex > this.total_page){
						pgindex = this.total_page;
					}
					this.cur_pageindex = pgindex;
					loadHouseList();
				}
			}
		})

		function loadHeaderAndFooter() {
			$('#page_header').load('../template/header.html');
			$('#page_menu').load('../template/mainmenu2.html', function() {
				changeMenu(2);
			});
			$('#city_sets').load('../template/choosecity.html');
			$('#page_footer').load('../template/footer.html');
		}
		
		 $('#searchtxt').bind('keyup', function(event) {
	        if (event.keyCode == "13") {
	            //回车执行查询
	            searchName = maincnt.namekey;
	            loadHouseList();
	        }
	    });
    
		function initMenu() {
			
//			window.location.href = "qgxf.html?name=" + maincnt.sname + "&type=" + maincnt.stype +
//				"&room=" + maincnt.sroom + "&harea=" + maincnt.sharea + "&price=" + maincnt.sprice + "&region=" + maincnt.sregion;

			var param_region = getParameter('region');
			var param_name = getParameter('name');
			var param_type = getParameter('type');
			var param_room = getParameter('room');
			var param_harea = getParameter('harea');
			var param_price = getParameter('price');
			
			var regions = getRegionChild(getCookie('kdcurcityId'));
			maincnt.region_name = regions.region_name;
			maincnt.region = regions.id;
			maincnt.region_type = regions.level;
			maincnt.htypeindex = 0;
			maincnt.hsindex = 0;
			
			
			
			
			var child = regions.child;
			var tmpchild = [];
			var tmpfirst = {
				id:regions.id,
				name:'不限'
			};
			tmpchild.push(tmpfirst);
			if(child){
				for(var i=0;i<child.length;i++){
					var ch = {
						id:child[i].id,
						name:child[i].region_name
					};
					tmpchild.push(ch);
				}
			}
			
			maincnt.areas = tmpchild;
			maincnt.areaindex = 0;
			
			var prices = getPrices();
			maincnt.prices = prices;
			maincnt.priceindex = 0;
			
			maincnt.housetypes = getHouseType();
			
			maincnt.housestyles = getCategory();
			
			
			maincnt.cur_pageindex = 1;
			
			if(param_region){
				regions = getRegionChild(regions);
			}
			
			if(param_name){
				maincnt.region_name = param_name;
				searchName = maincnt.namekey = param_name;
			}
			
			if(param_type&&param_type!='0'){
				maincnt.hsindex = param_type;
			}
			
			if(param_room&&param_room!='0'){
				maincnt.htypeindex = param_room;
			}
			
			if(param_price&&param_price!='0'){
				maincnt.priceindex = param_price;
			}
			
//			var selectName = getParameter('name');
//			if(selectName){
//				maincnt.namekey = selectName;
//			}
		}
		
		
		var searchName = ''; 
		function loadHouseList(){
			
			var data = {
				page:maincnt.cur_pageindex, 
				pageSize:maincnt.pagesize,
				region :maincnt.region, 
				price : maincnt.prices[maincnt.priceindex].id, 
				room : maincnt.housetypes[maincnt.htypeindex].id, 
				type :maincnt.housestyles[maincnt.hsindex].id, 
				name : searchName,
				region_type:maincnt.region_type
			};
			
			if(data.name){
//				data.region_type = 0;
			}
			
			var urlstr = publicUrl+'/v1/house/list';			
			
			jQuery.get(urlstr,data,function(res){
				console.log(res);
				maincnt.houses = res.data.list;
				maincnt.next_page = res.data.nextPage;
				maincnt.total_page = Math.ceil(res.data.pageNum/maincnt.pagesize);
				if(maincnt.total_page <= 10){
					var tmp = ['left'];
					for(var i=1;i<=maincnt.total_page;i++){
						tmp.push(i);
					}
					tmp.push('right');
					maincnt.page_nav = [tmp];
				}
				else{
					if(maincnt.cur_pageindex == maincnt.total_page || maincnt.cur_pageindex == maincnt.total_page-1){
						maincnt.page_nav = [['left',1],[maincnt.total_page-1,maincnt.total_page,'right']];
					}
					else if(maincnt.cur_pageindex == 1){
						maincnt.page_nav = [['left',1,2],[maincnt.total_page,'right']];
					}
					else if(maincnt.cur_pageindex == 2){
						maincnt.page_nav = [['left',1,2,3],[maincnt.total_page,'right']];
					}
					else{
						maincnt.page_nav = [['left',1],[maincnt.cur_pageindex,maincnt.next_page],[maincnt.total_page,'right']];
					}
				}
				for(var i=0;i<maincnt.houses.length;i++){
					maincnt.houses[i].img_path = LocalImgUrl + maincnt.houses[i].img_path;
					if(maincnt.houses[i].address == ''){
						maincnt.houses[i].address = '暂无详情';
					}
					maincnt.houses[i].region_name = getRegionName(maincnt.houses[i].region_id);
				}
				$(window).scrollTop(0);
			});
		}
		
	</script>

</html>